<template>
  <div class="detail">
    <header>
      <div class="return" :style="styleOpacity">
        <i class="iconfont icon-fanhui" @click="goBack" :style="iStyle"></i>
        <ul v-show="isHeader">
          <li class="active">商品</li>
          <li>评价</li>
          <li>详情</li>
          <li>推荐</li>
        </ul>
        <i class="iconfont icon-fukuan" :style="iStyle" @click="toShares"></i>
      </div>
    </header>
    <section ref="main">
      <div>
        <van-swipe @change="onChange" :autoplay="3000">
          <van-swipe-item>
            <img :src="goods.imgUrl" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="goods.imgUrl" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="goods.imgUrl" alt="" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/3</div>
          </template>
        </van-swipe>
        <div class="detail-content">
          <p class="price"><span>￥</span>{{ goods.price }}</p>
          <div>
            <h2 class="title">{{ goods.name }}</h2>
            <p class="content">{{ goods.content }}</p>
          </div>
          <!-- 测试 -->
          <img :src="goods.imgUrl" alt="" />
          <img :src="goods.imgUrl" alt="" />
        </div>
      </div>
    </section>

    <footer>
      <div>
        <img src="@/assets/img/home.png" alt="" />
        <p>首页</p>
      </div>
      <div>
        <img src="../assets/img/kufu.png" alt="" />
        <p>客服</p>
      </div>
      <div>
        <img src="@/assets/img/cart.png" alt="" />
        <p>购物车</p>
      </div>
      <div @click="showPop">
        <button class="cart">加入购物车</button>
      </div>
    </footer>

    <!-- 分享 -->
    <div class="mask" v-show="isSheet" @click="SharesClose"></div>
    <transition
      enter-active-class="animate__animated animate__slideInUp"
      leave-active-class="animate__animated animate__slideOutDown"
    >
      <div class="detail-sheet" v-show="isSheet">
        <h3>分享</h3>
        <Share :shareSites="shareSites" class="share"></Share>
        <div @click="SharesClose" class="close">取消</div>
      </div>
    </transition>
    <!-- 购物车 -->
    <div class="mask" v-show="isShow" @click="SharesClose"></div>
    <transition
      enter-active-class="animate__animated animate__slideInUp"
      leave-active-class="animate__animated animate__slideOutDown"
    >
      <div class="detail-sheet" v-show="isShow">
        <div class="showCart">
          <img :src="goods.imgUrl" alt="">
        </div>
        <div>
          <van-stepper v-model="num" />
        </div>
        <div @click="addCart" class="close">加入购物车</div>
      </div>
    </transition>
  </div>
</template>

<script>
import http from '@/serveies/api/request'
import BScroll from 'better-scroll'
import Share from 'vue-shares'
import { Toast } from 'mint-ui'

export default {
  name: 'Detail',
  data () {
    return {
      id: null,
      shareSites: ['qq', 'weibo', ''],
      isHeader: false,
      current: 0,
      goods: [],
      BSDetail: '',
      styleOpacity: {},
      iStyle: {},
      isSheet: false,
      isShow: false,
      // 购买的数量
      num: 1
    }
  },
  components: {
    Share
  },
  created () {
    // 获取路径中 keep-alive中之前的值
    this.id = this.$route.query.id
    this.getDate()
  },
  // 加入 keep-alive
  activated () {
    if (!(this.$route.query.id === this.id)) {
      this.getDate()
      this.id = this.$route.query.id
    }
  },
  methods: {
    getDate () {
      http
        .$axios({
          url: '/api/goods/id',
          params: {
            id: this.$route.query.id
          }
        })
        .then((res) => {
          this.goods = res[0]
          this.$nextTick(() => {
            this.BSDetail = new BScroll(this.$refs.main, {
              click: true,
              probeType: 3
            })
            this.BSDetail.on('scroll', (pos) => {
              const posY = Math.abs(pos.y)
              let opacity = posY / 180
              opacity = opacity > 1 ? 1 : opacity
              if (posY >= 50) {
                this.isHeader = true
                this.styleOpacity = {
                  opacity: opacity,
                  background: '#fff',
                  color: '#000'
                }
                this.iStyle = {
                  background: '#fff'
                }
              } else {
                this.isHeader = false
                this.styleOpacity = {
                  opacity: 1
                }
                this.iStyle = {
                  background: '#eee'
                }
              }
            })
          })
        })
    },
    goBack () {
      this.$router.back()
    },
    onChange (index) {
      this.current = index
    },
    toShares () {
      this.isSheet = true
    },
    SharesClose () {
      this.isSheet = false
      this.isShow = false
    },
    showPop () {
      this.isShow = true
    },
    addCart () {
      this.isShow = false
      http.$axios({
        url: '/api/addCart',
        method: 'POST',
        data: {
          goodsId: this.goods.id,
          goodsNum: this.num
        },
        headers: {
          token: true
        }
      }).then(res => {
        Toast(res.msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-indicator {
  position: absolute;
  right: 0.533333rem;
  bottom: 0.533333rem;
  padding: 0.133333rem 0.266667rem;
  border-radius: 0.133333rem;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}
.detail {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  header {
    width: 100%;
    .return {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 888;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 0.533333rem;
      height: 1.066667rem;
      width: 100%;
      opacity: 1;
      color: #fff;
      ul {
        display: flex;
        font-size: 0.32rem;
        li {
          margin: 0 0.16rem;
          font-size: 0.373333rem;
          padding-bottom: 0.106667rem;
        }
        .active {
          color: #ff6700;
          font-weight: 700;
          border-bottom: 2px solid #ff6700;
        }
      }
      i {
        font-size: 0.48rem;
        padding: 0.133333rem;
        border-radius: 50%;
        background-color: #eee;
      }
    }
  }
  section {
    width: 100%;
    height: 100%;
    margin-bottom: 1.333333rem;
    .van-swipe-item {
      img {
        width: 100%;
        height: 10.986667rem;
      }
    }
    .detail-content {
      .price {
        color: #ff6700;
        font-size: 0.533333rem;
        font-family: Avenir, Arial, sans-serif;
        font-weight: 700;
        padding: 0.266667rem;
        border-bottom: 1px solid #eee;
      }
      div {
        font-size: 0.373333rem;
        padding: 0.266667rem;
        border-bottom: 1px solid #eee;
        .title {
          font-size: 0.48rem;
        }
        .content {
          padding-top: 0.133333rem;
          font-family: Avenir, Arial, sans-serif;
          color: rgba(0, 0, 0, 0.8);
        }
      }
      img {
        width: 100%;
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1.333333rem;
    padding-top: 0.133333rem;
    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    div {
      font-size: 0.32rem;
      color: #ccc;
      img {
        width: 20px;
        height: 20px;
      }
      .cart {
        width: 5.333333rem;
        height: 0.986667rem;
        outline: none;
        font-size: 0.426667rem;
        border: 1px solid #ff6700;
        background-color: #ff6700;
        border-radius: 0.533333rem;
        color: #fff;
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 997;
  }
  .detail-sheet {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    height: 3.466667rem;
    padding: 0.266667rem;
    text-align: center;
    background-color: #fff;
    h3 {
      font-size: 0.586667rem;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.87);
    }
    ::v-deep .share {
      padding: 0.133333rem;
    }
    .close {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0.266667rem 0;
      font-size: 0.533333rem;
      border-top: 1px solid #eee;
      color: rgba(0, 0, 0, 0.87);
    }
    .showCart {
      img {
        width: 1.333333rem;
        height: 1.333333rem;
      }
    }
  }
}
</style>
